<template>
  <div class="layui-container flex">
    <div class="layui-row font">确定修改账号为 {{username}}吗？</div>
    <div class="layui-row mt2">
      <button class="layui-btn mr1" @click="confirm" :class="{'layui-btn-disabled': isSend}">确定修改</button>
      <router-link :to="{name: 'index'}"><button class="layui-btn">回到首页</button></router-link>
    </div>
  </div>
</template>

<script>
import { updateUserName } from '@/api/user'
let obj = {}
export default {
  name: 'confirm',
  data () {
    return {
      username: '',
      isSend: false
    }
  },
  mounted () {
    const stringStr = window.location.href.replace(/.*\?/, '')
    obj = Object.fromEntries(stringStr.split('&').map((item) => item.split('=')))
    obj.username = decodeURIComponent(obj.username)
    this.username = obj.username
  },
  methods: {
    async confirm () {
      if (this.isSend) {
        return
      }
      const res = await updateUserName(obj)
      if (res.code === 200) {
        this.isSend = true
        this.$pop('', '更新邮箱成功')
        setTimeout(() => {
          this.$router.push('/')
        }, 1000)
      } else {
        this.$pop('', res.msg)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.flex{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  .font{
    font-size: 20px;
    color: #333;
  }
}
</style>
